﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="ShinyHwong">
    <title>小米官网</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="iconfont/other/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!--头部开始-->
    <header>
        <div class="topBanner"></div>
        <div class="nav">
            <div class="navCenter">
                <ul>
                    <li><a href="#">小米商城</a><span>|</span></li>
                    <li><a href="#">MIUI</a><span>|</span></li>
                    <li><a href="#">米聊</a><span>|</span></li>
                    <li><a href="#">游戏</a><span>|</span></li>
                    <li><a href="#">多看阅读</a><span>|</span></li>
                    <li><a href="#">云服务</a><span>|</span></li>
                    <li><a href="#">金融</a><span>|</span></li>
                    <li><a href="#">小米商城移动版</a><span>|</span></li>
                    <li><a href="#">问题反馈</a><span>|</span></li>
                    <li><a href="#">Select Region</a></li>
                </ul>
                <div class="login">
                    <ul>
                        <li><a href="#">登录<span>|</span></a></li>
                        <li><a href="#">注册</a><span>|</span></li>
                        <li><a href="#">消息通知</a></li>
                    </ul>
                    <div class="shoppingCart">
                        <i>&#xe61b;</i>购物车( 0 )
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--头部结束-->
    <!--导航栏开始-->
    <div class="logoNav">
        <div class="logo"><img src="images/1-top/logo.jpg"></div>
        <ul>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">红米</a></li>
            <li><a href="#">平板 · 笔记本</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">盒子 · 影音</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
        <div class="search">
            <!-- <div class="hotwords">
                <a href="#">小米MIX</a>
                <a href="#">小米电视3s 48英寸</a>
            </div> -->
            <input type="search">
            <input type="submit" value="&#xe605;">
        </div>
    </div>
    <!--导航栏结束-->
    <!--轮播图栏开始-->
    <div class="banner">
        <ul class="bannerPic">
            <li><img src="images/2-轮播栏/4.jpg" alt=""></li>
            <!-- <li><img src="images/2-轮播栏/banner2.jpg" alt=""></li>
        <li><img src="images/2-轮播栏/banner3.jpg" alt=""></li>
        <li><img src="images/2-轮播栏/banner4.jpg" alt=""></li>
        <li><img src="images/2-轮播栏/banner5.jpg" alt=""></li>
        <li><img src="images/2-轮播栏/banner1.jpg" alt=""></li> -->
        </ul>
        <div class="bannerDot">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="menu">
            <ul>
                <li><a href="#">手机 电话卡</a><span>></span></li>
                <li><a href="#">笔记本 平板</a><span>></span></li>
                <li><a href="#">电视 盒子</a><span>></span></li>
                <li><a href="#">路由器 智能硬件</a><span>></span></li>
                <li><a href="#">移动电源 电池 插线板</a><span>></span></li>
                <li><a href="#">耳机 音响</a><span>></span></li>
                <li><a href="#">保护套 贴膜</a><span>></span></li>
                <li><a href="#">线材 支架 存储卡</a><span>></span></li>
                <li><a href="#">箱包 服饰</a><span>></span></li>
                <li><a href="#">米兔 生活周边</a><span>></span></li>
            </ul>
        </div>
        <span class="arrow leftArrow">&#xe66b;</span>
        <span class="arrow rightArrow">&#xe601;</span>
    </div>
    <!--轮播图栏结束-->
    <!--图片栏开始-->
    <div class="suggest">
        <ul class="app">
            <li><i>&#xe602;</i>选购手机</li>
            <li><i>&#xe653;</i>企业团购</li>
            <li><i>&#xe610;</i>一元活动</li>
            <li><i>&#xe85e;</i>小米移动</li>
            <li><i>&#xe666;</i>以旧换新</li>
            <li><i>&#xe6f0;</i>话费充值</li>
        </ul>
        <ul class="suggestImg">
            <li><img src="images/2-轮播栏/1.jpg" alt=""></li>
            <li><img src="images/2-轮播栏/2.jpg" alt=""></li>
            <li><img src="images/2-轮播栏/3.jpg" alt=""></li>
        </ul>
    </div>
    <!--图片栏结束-->
    <!--明星单品开始-->
    <div class="star">
        <div class="title">
            <h2>小米明星单品</h2>
            <span class="miniArrow">&#xe601;</span>
            <span class="miniArrow">&#xe66b;</span>
        </div>
        <ul>
            <li>
                <div><img src="images/3-明星单品/1.jpg" alt=""></div>
                <div class="description">
                    <h3>RedmiBook 14 增强版 </h3>
                    <p>i7/8G/512G 银色</p>
                    <h4>4499元</h4>
                </div>
            </li>
            <li>
                <div><img src="images/3-明星单品/2.png" alt=""></div>
                <div class="description">
                    <h3>小米移动电源10000mAh高配 灰色</h3>
                    <p> 轻薄设计，轻松出行</p>
                    <h4>129元</h4>
                </div>
            </li>
            <li>
                <div><img src="images/3-明星单品/3.jpg" alt=""></div>
                <div class="description">
                    <h3>小米小爱鼠标 黑色</h3>
                    <p>内置小爱同学，智享高效办公</p>
                    <h4>129元</h4>
                </div>
            </li>
            <li>
                <div><img src="images/3-明星单品/4.jpg" alt=""></div>
                <div class="description">
                    <h3>积木 沙漠赛车 白色</h3>
                    <p>炫酷的贴身玩伴</p>
                    <h4>69元</h4>
                </div>
            </li>
            <li>
                <div><img src="images/3-明星单品/5.jpg" alt=""></div>
                <div class="description">
                    <h3>米家两门冰箱 160L 银色</h3>
                    <p>小巧能装，速冻养鲜</p>
                    <h4>899元</h4>
                </div>
            </li>
        </ul>
    </div>
    <!--明星单品结束-->
    <!--产品分类开始-->
    <div class="mainbody">
        <div class="smart">
            <div class="title">
                <h2>手机</h2>
                <p>查看全部<i>&#xe646;</i></p>
            </div>
            <div class="aside">
                <img src="images/4-智能硬件/aside.jpg" alt="">
            </div>
            <ul class="list">
                <li>
                    <img src="images/4-智能硬件/1.jpg" alt="">
                    <div class="description">
                        <h3>
                            Note 9 Pro
                        </h3>
                        <p>一亿像素夜景相机，120Hz六档变速高刷屏</p>
                        <h4>1599元起</h4>
                    </div>
                </li>
                <li>
                    <img src="images/4-智能硬件/2.jpg" alt="">
                    <div class="description">
                        <h3>
                            Redmi K30S 至尊纪念版
                        </h3>
                        <p>144Hz[7档]变速高刷屏</p>
                        <h4>2599元起</h4>
                    </div>
                </li>
                <li>
                    <img src="images/4-智能硬件/3.jpg" alt="">
                    <div class="description">
                        <h3>
                            腾讯黑鲨3S
                        </h3>
                        <p>骁龙865处理器，120Hz刷新率</p>
                        <h4>3999元</h4>
                    </div>
                </li>
                <li>
                    <img src="images/4-智能硬件/4.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米10 至尊版
                        </h3>
                        <p>120X 变焦/120W秒充/120Hz屏幕</p>
                        <h4>5299元</h4>
                    </div>
                </li>
                <li>
                    <img src="images/4-智能硬件/5.jpg" alt="">
                    <div class="description">
                        <h3>
                            Note 9
                        </h3>
                        <p>天玑 800U处理器，5000mAh电池，</p>
                        <h4>1299元</h4>
                    </div>
                </li>
                <li>
                    <img src="images/4-智能硬件/6.jpg" alt="">
                    <div class="description">
                        <h3>Redmi 10X Pro 5G</h3>
                        <p>双5G待机，天玑820处理器</p>
                        <h4>2099元</h4>
                    </div>
                </li>
                <li>
                    <img src="images/4-智能硬件/7.jpg" alt="">
                    <div class="description">
                        <h3>Redmi K30 5G</h3>
                        <p>双模5G，120Hz流速屏</p>
                        <h4>1599元</h4>
                    </div>
                </li>
                <li>
                    <img src="images/4-智能硬件/8.jpg" alt="">
                    <div class="description">
                        <h3>小米10</h3>
                        <p>骁龙865处理器/1亿像素8K电影相机</p>
                        <h4>3799元</h4>
                    </div>
            </ul>



        </div>




        <div class="collocation">
            <div class="title">
                <h2>家电</h2>
                <div class="other">
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">耳机音响</a></li>
                        <li><a href="#">电源</a></li>
                        <li><a href="#">电池存储卡</a></li>
                    </ul>
                </div>
            </div>
            <div class="aside">
                <ul>
                    <li><img src="images/5-搭配/aside1.jpg" alt=""></li>
                    <li><img src="images/5-搭配/aside2.jpg" alt=""></li>
                </ul>
            </div>
            <ul class="list">
                <li>
                    <img src="images/5-搭配/1.jpg" alt="">
                    <div class="description">
                        <h3>
                            Redmi 红米电视 70英寸
                        </h3>
                        <p>
                            70英寸震撼巨屏，4K画质，细腻如真
                        </p>
                        <h4>3299元 <span>3799元</span></h4>

                    </div>
                </li>
                <li>
                    <img src="images/5-搭配/2.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米全面屏电视E55A
                        </h3>
                        <p>全面屏设计，人工智能语音</p>
                        <h4>2199元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/5-搭配/3.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米全面屏电视E32C
                        </h3>
                        <p>全面屏设计，人工智能系统</p>
                        <h4>899元 <span>999元</span></h4>

                    </div>
                </li>
                <li>
                    <img src="images/5-搭配/4.jpg" alt="">
                    <div class="description">
                        <h3>
                            米家空调
                        </h3>
                        <p>出众静音，快速制冷热</p>
                        <h4>1499元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/5-搭配/5.jpg" alt="">
                    <div class="description">
                        <h3>
                            Redmi全自动波轮洗衣机1A 8kg
                        </h3>
                        <p>一键操作，父母都爱用</p>
                        <h4>799元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/5-搭配/6.jpg" alt="">
                    <div class="description">
                        <h3>
                            米家互联网洗烘一体机 Pro 10kg
                        </h3>
                        <p>智能洗烘，省心省力</p>
                        <h4>2899元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/5-搭配/7.jpg" alt="">
                    <div class="description">
                        <h3>
                            Air 13.3" 2019款
                        </h3>
                        <h4>3999元</h4>
                        <p>新一代独立显卡</p>
                    </div>
                </li>
                <li class="more">
                    <div class="moreTop">
                        <div class="description">
                            <h3>
                                米家互联网烟灶
                            </h3>
                            <h4>2298元</h4>
                        </div>
                        <img src="images/5-搭配/8.jpg" alt="">
                    </div>
                    <div class="moreBottom">
                        <p>浏览更多</p>
                        <span>热门</span>
                        <i class="arrow">&#xe600;</i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="accessories">
            <div class="title">
                <h2>智能</h2>
                <div class="other">
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">保护套</a></li>
                        <li><a href="#">贴膜</a></li>
                        <li><a href="#">其他配件</a></li>
                    </ul>
                </div>
            </div>
            <div class="aside">
                <ul>
                    <li><img src="images/6-配件/aside1.jpg" alt=""></li>
                    <li><img src="images/6-配件/aside2.jpg" alt=""></li>
                </ul>
            </div>
            <ul class="list">
                <li>
                    <!-- <span class="discount flag">享6折</span> -->
                    <img src="images/6-配件/1.jpg" alt="">
                    <div class="description">
                        <h3>
                            米家智能窗帘
                        </h3>
                        <p>窗帘开合随心控</p>
                        <h4>799元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/6-配件/2.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米「小爱老师」
                        </h3>
                        <p>英语提分利器</p>
                        <h4>999元</h4>

                    </div>
                </li>
                <li>
                    <!-- <span class="discount flag">享6折</span> -->
                    <img src="images/6-配件/3.jpg" alt="">
                    <div class="description">
                        <h3>
                            小爱音箱万能遥控版
                        </h3>
                        <p>传统家电秒变智能</p>
                        <h4>149元 <span>199元</span></h4>

                    </div>
                </li>
                <li>
                    <!-- <span class="new flag">新品</span> -->
                    <img src="images/6-配件/4.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米智能门锁 E
                        </h3>
                        <p>告别钥匙，畅享便捷生活</p>
                        <h4>999元</h4>

                    </div>
                </li>
                <li>
                    <!-- <span class="new flag">新品</span> -->
                    <img src="images/6-配件/5.jpg" alt="">
                    <div class="description">
                        <h3>
                            米家电饭煲4L
                        </h3>
                        <p>890W 立体加热 </p>
                        <h4>299元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/6-配件/6.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米小爱音箱 Play
                        </h3>
                        <p>听音乐、语音遥控家电</p>
                        <h4>99元<span>169元</span></h4>

                    </div>
                </li>
                <li>
                    <img src="images/6-配件/7.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米体脂秤2
                        </h3>
                        <p>轻松掌握身体脂肪率</p>
                        <h4>99元</h4>

                    </div>
                </li>
                <li class="more">
                    <div class="moreTop">
                        <div class="description">
                            <h3>
                                九号平衡车
                            </h3>
                            <h4>1999元</h4>
                        </div>
                        <img src="images/6-配件/8.jpg" alt="">
                    </div>
                    <div class="moreBottom">
                        <p>浏览更多</p>
                        <span>热门</span>
                        <i class="arrow">&#xe600;</i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="peripheral">
            <div class="title">
                <h2>周边</h2>
                <div class="other">
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">保护套</a></li>
                        <li><a href="#">贴膜</a></li>
                        <li><a href="#">其他配件</a></li>
                    </ul>
                </div>
            </div>
            <div class="aside">
                <ul>
                    <li><img src="images/7-周边/aside1.jpg" alt=""></li>
                    <li><img src="images/7-周边/aside2.jpg" alt=""></li>
                </ul>
            </div>
            <ul class="list">
                <li>

                    <div class="description">
                        <img src="images/7-周边/1.jpg" alt="">
                        <h3>90分旅行箱 24寸</h3>
                        <h4>349元</h4>
                    </div>
                </li>
                <li>
                    <img src="images/7-周边/2.jpg" alt="">
                    <div class="description">
                        <h3>最生活浴巾·青春系列</h3>
                        <h4>99元</h4>
                        <p>2894人评价</p>
                    </div>
                </li>
                <li>

                    <img src="images/7-周边/3.jpg" alt="">
                    <div class="description">
                        <h3>8H标准乳胶枕</h3>
                        <h4>149元 <span>159元</span></h4>
                        <p>6182人评价</p>
                    </div>
                </li>
                <li>

                    <img src="images/7-周边/4.jpg" alt="">
                    <div class="description">
                        <h3>经典连帽休闲卫衣</h3>
                        <h4>109元 <span>149元</span></h4>
                        <p>1.4万人评价</p>
                    </div>
                </li>
                <li>

                    <img src="images/7-周边/5.jpg" alt="">
                    <div class="description">
                        <h3>米家签字笔</h3>
                        <h4>14.9元</h4>
                    </div>
                </li>
                <li>
                    <img src="images/7-周边/6.jpg" alt="">
                    <div class="description">
                        <h3>防雾霾口罩</h3>
                        <h4>16元</h4>
                        <p>1.3万人评价</p>
                    </div>
                </li>
                <li>
                    <img src="images/7-周边/7.jpg" alt="">
                    <div class="description">
                        <h3>8H多功能护颈枕U1</h3>
                        <h4>79元</h4>
                        <p>1.1万人评价</p>
                    </div>
                </li>
                <li class="more">
                    <div class="moreTop">
                        <div class="description">
                            <h3>变形金刚特...</h3>
                            <h4>169元</h4>
                        </div>
                        <img src="images/7-周边/8.jpg" alt="">
                    </div>
                    <div class="moreBottom">
                        <p>浏览更多</p>
                        <span>热门</span>
                        <i class="arrow">&#xe600;</i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="forYou">
            <div class="title">
                <h2>为你推荐</h2>
                <span class="miniArrow">&#xe601;</span>
                <span class="miniArrow">&#xe66b;</span>
            </div>
            <ul class="singleList list">
                <li>
                    <img src="images/8-为你推荐/1.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米真无线蓝牙耳机Air 2 Pro
                        </h3>
                        <p> 主动降噪/持久续航/无线充</p>
                        <h4>699元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/8-为你推荐/2.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米真无线蓝牙耳机Air 2s
                        </h3>
                        <p>全面升级，智慧真无线</p>
                        <h4>399元</h4>
                    </div>
                </li>
                <li>
                    <img src="images/8-为你推荐/3.jpg" alt="">
                    <div class="description">
                        <h3>
                            高速无线充套装
                        </h3>
                        <p>快速无线闪充，Qi充电标准</p>
                        <h4>149元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/8-为你推荐/4.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米插线板 5孔位
                        </h3>
                        <p>多重安全保护</p>
                        <h4>39元</h4>

                    </div>
                </li>
                <li>
                    <img src="images/8-为你推荐/5.jpg" alt="">
                    <div class="description">
                        <h3>
                            小米小爱触屏音箱
                        </h3>
                        <p>好听，更好看</p>

                        <h4>199元</h4>
                    </div>
                </li>
            </ul>
        </div>

        <div class="video">
            <div class="title">
                <h2>视频</h2>
                <p>查看全部<i>&#xe646;</i></p>
            </div>
            <ul>
                <li>
                    <img src="images/9-视频/1.jpg" alt="">
                    <h3>红米Note 4X 环岛挑战</h3>
                    <p>看看我们关于超长续航的疯狂想法</p>
                </li>
                <li>
                    <img src="images/9-视频/2.jpg" alt="">
                    <h3>小米之家里发生了一件怪事</h3>
                    <p>World Order星机械人受邀访问地球</p>
                </li>
                <li>
                    <img src="images/9-视频/3.jpg" alt="">
                    <h3>小米MIX 概念手机背后的故事</h3>
                    <p>雷总亲自讲述小米MIX的诞生</p>
                </li>
                <li>
                    <img src="images/9-视频/4.jpg" alt="">
                    <h3>一面科技，一面艺术</h3>
                    <p>梁朝伟讲述双面人生</p>
                </li>
            </ul>
        </div>
    </div>
    <!--产品分类结束-->
    <!--尾部开始-->
    <footer>
        <div class="aboutBG">
            <div class="about">
                <div class="policy">
                    <ul>
                        <li>
                            <i>&#xe62e;</i>预约维修服务
                        </li>
                        <li>
                            <i>&#xe606;</i>7天无理由退货
                        </li>
                        <li>
                            <i>&#xe607;</i>15天免费换货
                        </li>
                        <li>
                            <i>&#xe639;</i>满150元包邮
                        </li>
                        <li>
                            <i>&#xe64c;</i>520余家售后网点
                        </li>
                    </ul>
                    <div class="survey">
                        <dl>
                            <dt>帮助中心</dt>
                            <dd><a href="#">账户管理</a></dd>
                            <dd><a href="#">购物指南</a></dd>
                            <dd><a href="#">订单操作</a></dd>
                        </dl>
                        <dl>
                            <dt>服务支持</dt>
                            <dd><a href="#">售后政策</a></dd>
                            <dd><a href="#">自助服务</a></dd>
                            <dd><a href="#">相关下载</a></dd>
                        </dl>
                        <dl>
                            <dt>线下门店</dt>
                            <dd><a href="#">小米之家</a></dd>
                            <dd><a href="#">服务网点</a></dd>
                            <dd><a href="#">零售网点</a></dd>
                        </dl>
                        <dl>
                            <dt>关于小米</dt>
                            <dd><a href="#">了解小米</a></dd>
                            <dd><a href="#">加入小米</a></dd>
                            <dd><a href="#">联系我们</a></dd>
                        </dl>
                        <dl>
                            <dt>关注我们</dt>
                            <dd><a href="#">新浪微博</a></dd>
                            <dd><a href="#">小米部落</a></dd>
                            <dd><a href="#">官方微信</a></dd>
                        </dl>
                        <dl>
                            <dt>特色服务</dt>
                            <dd><a href="#">F码通道</a></dd>
                            <dd><a href="#">礼物码</a></dd>
                            <dd><a href="#">防伪查询</a></dd>
                        </dl>
                        <div class="contact">
                            <h2>400-100-5678</h2>
                            <p>周一至周日 8:00-18:00<br>仅收市话费</p>
                            <span><i>&#xe60e;</i>24小时在线客服</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copy">
            <div class="bottomLogo"><img src="images/10-底部/logo-footer.png" alt="logo"></div>
            <div class="link">
                <a href="#">小米商城</a> |
                <a href="#">MIUI</a> |
                <a href="#">米聊</a> |
                <a href="#">多看书城</a> |
                <a href="#">小米路由器</a> |
                <a href="#">视频电话</a> |
                <a href="#">企业团购</a> |
                <a href="#">小米天猫店</a> |
                <a href="#">小米淘宝直营店</a> |
                <a href="#">小米网盟</a> |
                <a href="#">小米移动</a> |
                <a href="#">Select Region</a>
                <br> &copymi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134 京网文[2014]0059-0009号
                <br> 违法和不良信息举报电话：186-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </div>
            <div class="verify">
                <img src="images/10-底部/truste.png" alt="">
                <img src="images/10-底部/v-logo-1.png" alt="">
                <img src="images/10-底部/v-logo-2.png" alt="">
                <img src="images/10-底部/v-logo-3.png" alt="">
            </div>
        </div>
        <div class="slogan"><img src="images/10-底部/slogan2016.png" alt=""></div>
    </footer>
    <!--尾部结束-->
</body>

</html>